<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WIFI助手 - 测速</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: #202124;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        /* iPhone 样式外壳 */
        .phone-container {
            position: relative;
            width: 375px;
            height: 812px;
            background-color: #111;
            border-radius: 40px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 10px;
        }
        
        /* 顶部刘海 */
        .notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 30px;
            background-color: #111;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            z-index: 10;
        }
        
        /* 底部指示条 */
        .home-indicator {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 5px;
            background-color: #f0f0f0;
            border-radius: 3px;
            z-index: 10;
        }
        
        /* 音量按钮 */
        .volume-button {
            position: absolute;
            left: -2px;
            top: 120px;
            width: 4px;
            height: 30px;
            background-color: #2a2a2a;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        
        .volume-button:before {
            content: '';
            position: absolute;
            left: 0;
            top: -40px;
            width: 4px;
            height: 30px;
            background-color: #2a2a2a;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        
        /* 电源按钮 */
        .power-button {
            position: absolute;
            right: -2px;
            top: 120px;
            width: 4px;
            height: 60px;
            background-color: #2a2a2a;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }
        
        /* 屏幕 */
        .screen {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #EDEDED; /* 微信背景色 */
            border-radius: 32px;
            overflow: hidden;
            z-index: 1;
        }
        
        /* App顶部状态栏 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 15px;
            height: 30px;
            background-color: #EDEDED;
        }
        
        .status-bar .time {
            font-weight: 600;
            font-size: 14px;
        }
        
        .status-bar .icons {
            display: flex;
            gap: 5px;
        }
        
        .status-bar .icons .icon {
            font-size: 14px;
        }
        
        /* App内容区域 */
        .app-content {
            position: relative;
            height: calc(100% - 30px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            padding-bottom: 60px; /* 为底部导航腾出空间 */
        }
        
        /* 测速仪表卡片 */
        .speed-gauge-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: relative;
            text-align: center;
        }
        
        .speed-gauge-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 10px;
            text-align: left;
        }
        
        .current-wifi {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .current-wifi i {
            color: #07C160;
            margin-right: 8px;
        }
        
        .current-wifi-name {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
        }
        
        .speedometer {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0 auto 20px;
        }
        
        .gauge-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(7,193,96,0.1) 0%, rgba(7,193,96,0.05) 70%, rgba(7,193,96,0) 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .gauge-value {
            font-size: 40px;
            font-weight: 700;
            color: #07C160;
        }
        
        .gauge-unit {
            font-size: 14px;
            color: #888888;
            margin-top: 5px;
        }
        
        .speed-indicators {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        
        .speed-indicator {
            text-align: center;
        }
        
        .indicator-value {
            font-size: 22px;
            font-weight: 500;
            color: #000000;
        }
        
        .indicator-label {
            font-size: 13px;
            color: #888888;
        }
        
        .start-test-btn {
            display: inline-block;
            background-color: #07C160;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .start-test-btn:active {
            background-color: #06a252;
        }
        
        /* 历史记录卡片 */
        .history-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .history-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .history-count {
            font-size: 13px;
            color: #888888;
        }
        
        .test-history {
            list-style: none;
        }
        
        .history-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #F2F2F2;
        }
        
        .history-item:last-child {
            border-bottom: none;
        }
        
        .history-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(7,193,96,0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
        }
        
        .history-icon i {
            color: #07C160;
            font-size: 20px;
        }
        
        .history-details {
            flex: 1;
        }
        
        .history-wifi-name {
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            margin-bottom: 3px;
        }
        
        .history-date {
            font-size: 13px;
            color: #888888;
        }
        
        .history-speeds {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        
        .download-speed, .upload-speed {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333333;
            margin-bottom: 3px;
        }
        
        .upload-speed {
            color: #888888;
        }
        
        .speed-icon {
            margin-right: 4px;
            font-size: 16px;
        }
        
        .download-icon {
            color: #07C160;
            transform: rotate(180deg);
        }
        
        .upload-icon {
            color: #888888;
        }
        
        /* 图表卡片 */
        .chart-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .chart-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 15px;
        }
        
        .chart-container {
            height: 220px;
            position: relative;
        }
        
        /* 测速进行中状态 */
        .testing-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(7,193,96,0.1);
            border-top: 4px solid #07C160;
            border-radius: 50%;
            margin-bottom: 20px;
            animation: spin 1s linear infinite;
        }
        
        .testing-text {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 10px;
        }
        
        .testing-progress {
            font-size: 14px;
            color: #888888;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 测速结果状态 */
        .test-result {
            display: none;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #F2F2F2;
        }
        
        .result-title {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .result-metrics {
            display: flex;
            justify-content: space-around;
        }
        
        .result-metric {
            text-align: center;
        }
        
        .result-value {
            font-size: 24px;
            font-weight: 500;
            color: #07C160;
            margin-bottom: 5px;
        }
        
        .result-label {
            font-size: 13px;
            color: #888888;
        }
        
        /* 底部导航栏 */
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: #F7F7F7;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #E6E6E6;
            z-index: 10;
            border-bottom-left-radius: 32px;
            border-bottom-right-radius: 32px;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            cursor: pointer;
        }
        
        .nav-icon {
            color: #888888;
            margin-bottom: 4px;
        }
        
        .nav-label {
            font-size: 12px;
            color: #888888;
        }
        
        .nav-active .nav-icon, 
        .nav-active .nav-label {
            color: #07C160; /* 微信绿 */
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- iPhone外壳元素 -->
        <div class="notch"></div>
        <div class="home-indicator"></div>
        <div class="volume-button"></div>
        <div class="power-button"></div>
        
        <!-- 屏幕内容 -->
        <div class="screen">
            <!-- 顶部状态栏 -->
            <div class="status-bar">
                <div class="time">20:08</div>
                <div class="icons">
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">signal_cellular_alt</i></div>
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">wifi</i></div>
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">battery_full</i></div>
                </div>
            </div>
            
            <!-- App内容区域 -->
            <div class="app-content">
                <!-- 测速仪表卡片 -->
                <div class="speed-gauge-card">
                    <div class="speed-gauge-title">网络测速</div>
                    
                    <div class="current-wifi">
                        <i class="material-icons">wifi</i>
                        <span class="current-wifi-name">家庭WIFI</span>
                    </div>
                    
                    <div class="speedometer">
                        <div class="gauge-circle">
                            <div>
                                <div class="gauge-value">0</div>
                                <div class="gauge-unit">Mbps</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="speed-indicators">
                        <div class="speed-indicator">
                            <div class="indicator-value">0</div>
                            <div class="indicator-label">下载 (Mbps)</div>
                        </div>
                        <div class="speed-indicator">
                            <div class="indicator-value">0</div>
                            <div class="indicator-label">上传 (Mbps)</div>
                        </div>
                    </div>
                    
                    <button class="start-test-btn" id="startTestBtn">开始测速</button>
                    
                    <!-- 测速进行中状态 -->
                    <div class="testing-overlay" id="testingOverlay">
                        <div class="spinner"></div>
                        <div class="testing-text">测速中...</div>
                        <div class="testing-progress" id="testingProgress">0%</div>
                    </div>
                    
                    <!-- 测速结果 -->
                    <div class="test-result" id="testResult">
                        <div class="result-title">测试结果</div>
                        <div class="result-metrics">
                            <div class="result-metric">
                                <div class="result-value" id="pingResult">0</div>
                                <div class="result-label">延迟 (ms)</div>
                            </div>
                            <div class="result-metric">
                                <div class="result-value" id="downloadResult">0</div>
                                <div class="result-label">下载 (Mbps)</div>
                            </div>
                            <div class="result-metric">
                                <div class="result-value" id="uploadResult">0</div>
                                <div class="result-label">上传 (Mbps)</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 图表卡片 -->
                <div class="chart-card">
                    <div class="chart-title">速度历史</div>
                    <div class="chart-container">
                        <canvas id="speedChart"></canvas>
                    </div>
                </div>
                
                <!-- 历史记录卡片 -->
                <div class="history-card">
                    <div class="history-title">
                        <span>测速历史</span>
                        <span class="history-count">5条记录</span>
                    </div>
                    
                    <ul class="test-history">
                        <li class="history-item">
                            <div class="history-icon">
                                <i class="material-icons">speed</i>
                            </div>
                            <div class="history-details">
                                <div class="history-wifi-name">家庭WIFI</div>
                                <div class="history-date">今天 18:30</div>
                            </div>
                            <div class="history-speeds">
                                <div class="download-speed">
                                    <i class="material-icons speed-icon download-icon">arrow_upward</i>
                                    <span>86.5 Mbps</span>
                                </div>
                                <div class="upload-speed">
                                    <i class="material-icons speed-icon upload-icon">arrow_upward</i>
                                    <span>24.8 Mbps</span>
                                </div>
                            </div>
                        </li>
                        
                        <li class="history-item">
                            <div class="history-icon">
                                <i class="material-icons">speed</i>
                            </div>
                            <div class="history-details">
                                <div class="history-wifi-name">家庭WIFI</div>
                                <div class="history-date">今天 15:45</div>
                            </div>
                            <div class="history-speeds">
                                <div class="download-speed">
                                    <i class="material-icons speed-icon download-icon">arrow_upward</i>
                                    <span>92.3 Mbps</span>
                                </div>
                                <div class="upload-speed">
                                    <i class="material-icons speed-icon upload-icon">arrow_upward</i>
                                    <span>25.6 Mbps</span>
                                </div>
                            </div>
                        </li>
                        
                        <li class="history-item">
                            <div class="history-icon">
                                <i class="material-icons">speed</i>
                            </div>
                            <div class="history-details">
                                <div class="history-wifi-name">咖啡厅WIFI</div>
                                <div class="history-date">昨天 14:20</div>
                            </div>
                            <div class="history-speeds">
                                <div class="download-speed">
                                    <i class="material-icons speed-icon download-icon">arrow_upward</i>
                                    <span>32.7 Mbps</span>
                                </div>
                                <div class="upload-speed">
                                    <i class="material-icons speed-icon upload-icon">arrow_upward</i>
                                    <span>8.4 Mbps</span>
                                </div>
                            </div>
                        </li>
                        
                        <li class="history-item">
                            <div class="history-icon">
                                <i class="material-icons">speed</i>
                            </div>
                            <div class="history-details">
                                <div class="history-wifi-name">公共WIFI</div>
                                <div class="history-date">昨天 10:15</div>
                            </div>
                            <div class="history-speeds">
                                <div class="download-speed">
                                    <i class="material-icons speed-icon download-icon">arrow_upward</i>
                                    <span>18.9 Mbps</span>
                                </div>
                                <div class="upload-speed">
                                    <i class="material-icons speed-icon upload-icon">arrow_upward</i>
                                    <span>5.2 Mbps</span>
                                </div>
                            </div>
                        </li>
                        
                        <li class="history-item">
                            <div class="history-icon">
                                <i class="material-icons">speed</i>
                            </div>
                            <div class="history-details">
                                <div class="history-wifi-name">5G-网络</div>
                                <div class="history-date">前天 16:40</div>
                            </div>
                            <div class="history-speeds">
                                <div class="download-speed">
                                    <i class="material-icons speed-icon download-icon">arrow_upward</i>
                                    <span>76.1 Mbps</span>
                                </div>
                                <div class="upload-speed">
                                    <i class="material-icons speed-icon upload-icon">arrow_upward</i>
                                    <span>22.3 Mbps</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="material-icons nav-icon">wifi</i>
                    <div class="nav-label">首页</div>
                </div>
                <div class="nav-item nav-active">
                    <i class="material-icons nav-icon">speed</i>
                    <div class="nav-label">测速</div>
                </div>
                <div class="nav-item">
                    <i class="material-icons nav-icon">location_on</i>
                    <div class="nav-label">IP查询</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        const ctx = document.getElementById('speedChart').getContext('2d');
        const speedChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['前天', '昨天', '昨天', '今天', '今天'],
                datasets: [
                    {
                        label: '下载速度',
                        data: [76.1, 18.9, 32.7, 92.3, 86.5],
                        borderColor: '#07C160',
                        backgroundColor: 'rgba(7, 193, 96, 0.1)',
                        borderWidth: 2,
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '上传速度',
                        data: [22.3, 5.2, 8.4, 25.6, 24.8],
                        borderColor: '#888888',
                        backgroundColor: 'rgba(136, 136, 136, 0.1)',
                        borderWidth: 2,
                        tension: 0.3,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Mbps'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            boxWidth: 12,
                            font: {
                                size: 12
                            }
                        }
                    }
                }
            }
        });
        
        // 测速按钮逻辑
        const startTestBtn = document.getElementById('startTestBtn');
        const testingOverlay = document.getElementById('testingOverlay');
        const testingProgress = document.getElementById('testingProgress');
        const testResult = document.getElementById('testResult');
        const gaugeValue = document.querySelector('.gauge-value');
        const downloadIndicator = document.querySelector('.speed-indicators .speed-indicator:first-child .indicator-value');
        const uploadIndicator = document.querySelector('.speed-indicators .speed-indicator:last-child .indicator-value');
        const pingResult = document.getElementById('pingResult');
        const downloadResult = document.getElementById('downloadResult');
        const uploadResult = document.getElementById('uploadResult');
        
        startTestBtn.addEventListener('click', function() {
            // 显示测速中状态
            testingOverlay.style.display = 'flex';
            testResult.style.display = 'none';
            
            // 重置数值
            gaugeValue.textContent = '0';
            downloadIndicator.textContent = '0';
            uploadIndicator.textContent = '0';
            
            let progress = 0;
            let downloadSpeed = 0;
            let uploadSpeed = 0;
            let ping = 0;
            
            // 模拟测速进度
            const progressInterval = setInterval(() => {
                progress += 2;
                testingProgress.textContent = `${progress}%`;
                
                // 模拟下载测速阶段 (0-50%)
                if (progress <= 50) {
                    downloadSpeed = (progress * 2) * (0.8 + Math.random() * 0.4);
                    downloadSpeed = Math.round(downloadSpeed * 10) / 10;
                    gaugeValue.textContent = downloadSpeed.toFixed(1);
                    downloadIndicator.textContent = downloadSpeed.toFixed(1);
                } 
                // 模拟上传测速阶段 (51-100%)
                else {
                    uploadSpeed = ((progress - 50) * 0.8) * (0.4 + Math.random() * 0.2);
                    uploadSpeed = Math.round(uploadSpeed * 10) / 10;
                    gaugeValue.textContent = uploadSpeed.toFixed(1);
                    uploadIndicator.textContent = uploadSpeed.toFixed(1);
                }
                
                // 测速完成
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    
                    // 隐藏测速中状态，显示结果
                    setTimeout(() => {
                        testingOverlay.style.display = 'none';
                        testResult.style.display = 'block';
                        
                        // 生成随机的ping值 (20-100)
                        ping = Math.floor(Math.random() * 80) + 20;
                        
                        // 展示最终结果
                        pingResult.textContent = ping;
                        downloadResult.textContent = downloadIndicator.textContent;
                        uploadResult.textContent = uploadIndicator.textContent;
                        
                        // 更新图表
                        speedChart.data.labels.push('刚刚');
                        speedChart.data.datasets[0].data.push(parseFloat(downloadResult.textContent));
                        speedChart.data.datasets[1].data.push(parseFloat(uploadResult.textContent));
                        
                        // 移除最早的数据点，保持5个点
                        if (speedChart.data.labels.length > 5) {
                            speedChart.data.labels.shift();
                            speedChart.data.datasets[0].data.shift();
                            speedChart.data.datasets[1].data.shift();
                        }
                        
                        speedChart.update();
                        
                        // 添加到历史记录
                        const testHistory = document.querySelector('.test-history');
                        const now = new Date();
                        const hours = now.getHours();
                        const minutes = now.getMinutes();
                        const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
                        
                        const newHistoryItem = document.createElement('li');
                        newHistoryItem.className = 'history-item';
                        newHistoryItem.innerHTML = `
                            <div class="history-icon">
                                <i class="material-icons">speed</i>
                            </div>
                            <div class="history-details">
                                <div class="history-wifi-name">家庭WIFI</div>
                                <div class="history-date">刚刚 ${hours}:${formattedMinutes}</div>
                            </div>
                            <div class="history-speeds">
                                <div class="download-speed">
                                    <i class="material-icons speed-icon download-icon">arrow_upward</i>
                                    <span>${downloadResult.textContent} Mbps</span>
                                </div>
                                <div class="upload-speed">
                                    <i class="material-icons speed-icon upload-icon">arrow_upward</i>
                                    <span>${uploadResult.textContent} Mbps</span>
                                </div>
                            </div>
                        `;
                        
                        // 插入新的历史记录到顶部
                        testHistory.insertBefore(newHistoryItem, testHistory.firstChild);
                        
                        // 如果记录超过5条，移除最后一条
                        if (testHistory.children.length > 5) {
                            testHistory.removeChild(testHistory.lastChild);
                        }
                        
                        // 更新历史记录数量
                        document.querySelector('.history-count').textContent = `${testHistory.children.length}条记录`;
                    }, 500);
                }
            }, 100);
        });
        
        // 底部导航栏切换
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有活动状态
                navItems.forEach(ni => ni.classList.remove('nav-active'));
                // 添加当前活动状态
                this.classList.add('nav-active');
                
                // 获取点击的导航项类型
                const navType = this.querySelector('.nav-label').textContent;
                
                // 如果点击的不是当前页面，跳转到相应页面
                if (navType !== '测速') {
                    const toast = document.createElement('div');
                    toast.style.position = 'fixed';
                    toast.style.bottom = '70px';
                    toast.style.left = '50%';
                    toast.style.transform = 'translateX(-50%)';
                    toast.style.background = 'rgba(0,0,0,0.7)';
                    toast.style.color = 'white';
                    toast.style.padding = '12px 20px';
                    toast.style.borderRadius = '8px';
                    toast.style.zIndex = '1000';
                    toast.style.fontSize = '15px';
                    toast.textContent = `正在加载${navType}页面...`;
                    document.body.appendChild(toast);
                    
                    // 根据点击的导航项确定跳转页面
                    let targetPage = '';
                    if (navType === '首页') {
                        targetPage = 'index.html';
                    } else if (navType === 'IP查询') {
                        targetPage = 'ip_lookup.html';
                    }
                    
                    // 500毫秒后跳转，给提示显示的时间
                    setTimeout(() => {
                        window.location.href = targetPage;
                    }, 500);
                }
            });
        });
        
        // 更新时间
        function updateTime() {
            const now = new Date();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            document.querySelector('.time').textContent = `${hours}:${minutes}`;
        }
        
        // 初始更新时间
        updateTime();
        
        // 每分钟更新一次时间
        setInterval(updateTime, 60000);
    </script>
</body>
</html> 